<route lang="jsonc" type="page">
    {
      "style": {
			"navigationStyle": "custom",
			"navigationBarTitleText": "我的订单"
		}
    }
</route>
<template>
	<view class="orderlist-page" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
		<header-navbar title="我的订单" />
		<!-- 订单状态 -->
		<!-- :styles="{ 'padding-top': `${safeAreaInsets?.top + 38}px` }" -->
		<tag-list
			:tag-data="tagData"
			:active="active"
			flex gap="10px"
			@change="handleActive"
		/>

		<view v-if="orderArr.length > 0" class="order-list">
			<view v-for="item in orderArr" :key="item.id" class="order-item">
				<view class="cell-item border">
					<view class="cell-item_center">{{ item.order_no }}</view>
				</view>
				
				<view :class="['order-content', { radius: item.extra_price === null }]">
					<view v-for="child in item.service" :key="child.id" class="service-item">
						<wd-img custom-class="image" width="70" height="70" mode="aspectFill" :src="$IMG_PREFIX + child.icon">
							<template #error>
							  <view class="error-wrap">加载失败</view>
							</template>
							<template #loading>
							  <view class="loading-wrap">
								<wd-loading />
							  </view>
							</template>
						</wd-img>
						<view class="right-panel">
							<view class="name">{{ child.name || child.home_name }}</view>
							<view class="price">¥ {{ child.price }}</view>
						</view>
					</view>
					
					<view class="pay-state">
						<view>
							<text class="state-text">{{ item.state === '0' ? '待支付' : '已支付'}}</text>
							<text class="price">¥ {{ item.total }}</text>
						</view>
						
						<!-- 0=待付款,1=待作业,2=作业完成,3=已完成,4=已取消 -->
						<view class="state-action">
							<wd-button v-if="item.state == 0" custom-class="btn-pay" :loading='loading' @click="orderStore.handlePay(item)">立即支付</wd-button>
							<!-- 雪具寄送、收取状态 -->
							<text v-if="getRepairState(item)" class="logistics-state">{{ getRepairState(item) }}</text>
						</view>
					</view>
				</view>
				<!-- 补款模块 -->
				<!-- && item.state < 2 -->
				<view v-if="item.add_state === '1'" class="balance-payment">
					<view class="label">补款原因</view>
					<view class="reason">{{ item.reason }}</view>
					
					<view class="pay-state" style="padding-top: 29px;">
						<view>
							<text class="state-text">需补款</text>
							<text class="price">¥ {{item.extra_price}}</text>
						</view>
						
						<!-- 0=待付款,1=待作业,2=作业完成,3=已完成,4=已取消 -->
						<view class="state-action">
							<wd-button custom-class="btn-pay" :loading='loading' @click="orderStore.handlePay({
								...item,
								order_type: 1
							})">立即支付</wd-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<wd-status-tip v-else image="content" tip="暂无订单" />
		
		<!-- 客服按钮 -->
		<fab-services bottom="27" />
	</view>
</template>

<script lang="ts" setup>
	import HeaderNavbar from '@/pages/components/header-navbar.vue';
	import { useSafeAreaInsets } from '@/mixins/basic'
	import * as TagList from '@/pages-sub/components/tag-list.vue'
	import FabServices from '@/pages/components/services.vue'
	import { computed, ref } from 'vue';
	import { getOrderList as _getOrderList } from '@/api/order'
	import { onLoad } from '@dcloudio/uni-app';
	import { useOrder } from '@/store/order'
	import { emitter } from '@/utils/eventBus'

	defineOptions({
		name: 'OrderList',
		options: {
			styleIsolation: 'shared'
		}
	})
	const { safeAreaInsets } = useSafeAreaInsets()
	const orderStore = useOrder()
	
	onLoad((opts: any) => {
		active.value = opts.state
		getOrderList(opts.state)
	})
	
	onMounted(() => {
		emitter.on('getOrderList', () => getOrderList(active.value))
	})
	
	onUnmounted(() => {
		emitter.off('getOrderList')
	})
	
	const active = ref('-1')
	// 标签数组
	const tagData = ref([
		{
			value: '-1',
			label: '全部'
		},
		{
			value: '0',
			label: '待付款'
		},
		{
			value: '1',
			label: '等待作业'
		},
		{
			value: '2',
			label: '作业完成'
		},
		{
			value: '3',
			label: '已完成'
		}
	])
	
	const orderArr = ref<Record<string, any>>([])
	const loading = ref<boolean>(false)
	// 获取雪具寄送状态
	const getRepairState = computed(() => {
		return (item: AnyObject) => {
			// 等待作业
			if (item.state === '1' && item.repair_state === 0) return '店家未收到雪具'
			
			// 作业完成
			if (item.state === '2') {
				return `作业已完成，${item.express_no ? '已发货' : '待发货'}`
			}
			
			return ''
		}
	})

	// 切换订单状态选中值
	function handleActive(value: any) {
		active.value = value
		getOrderList(value)
	}
	
	function getOrderList(state: any) {
		
		_getOrderList({
			status: state === '-1' ? undefined : state,
			timestamp: new Date().getTime()
		}).then(res => {
			orderArr.value = res?.map(item => {
				if (item.service_p) {
					// console.log(typeof item.service_p, item.service_p instanceof Array)
					item.service.forEach((el: AnyObject) => {
						if (!el.icon) {
							const find = item.service_p.find((fl: AnyObject) => fl.id === el.pid)
							if (find) el['icon'] = find.icon || ''
						}
					})
				}
				return {
					...item,
					// service_p: JSON.parse(item.service_p)
				}
			})
			
			console.log(orderArr.value)
		})
	}
</script>

<style lang="scss" scoped>
	.orderlist-page {
		:deep(.tag-box) {
			position: sticky;
			padding: 68px 12px 0 12px;
			background-color: #FCFEFF;
			.tag-item {
				font-size: 12px;
				font-weight: 600;
				height: 24px;
				line-height: 24px;
			}
		}
		
		.order-list {
			padding: 23px 25px;
			
			.order-item {
				box-shadow: 0px 8px 10px 0px rgb(241, 244, 249);
				border-radius: 8px;
				background-color: #fff;
				
				& + .order-item {
					margin-top: 24px;
				}
				
				.order-content {
					background-color: #fff;
					padding: 16px;
					&.radius {
						border-radius: 0 0 8px 8px;
					}
					.service-item {
						display: flex;
						min-width: 0;
						color: #23282C;
						& + .service-item {
							padding-top: 14px;
						}
						:deep(.image) {
							flex-shrink: 0;
							background: rgba(248, 248, 248, 1);
							border-radius: 8px;
							.error-wrap, .loading-wrap {
								height: 100%;
								display: flex;
								justify-content: center;
								align-items: center;
							}
						}
						
						.right-panel {
							flex: 1;
							padding: 6px 0 0 9px;
							font-size: 16px;
							font-weight: 500;
							line-height: 20px;
							display: flex;
							justify-content: space-between;
							> .price {
								flex-shrink: 0;
							}
						}
					}
				}
				.pay-state {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-top: 39px;
					.state-text {
						font-size: 18px;
						font-weight: 600;
						line-height: 28px;
					}
					
					.price {
						padding-left: 5px;
						font-size: 26px;
						font-weight: 900;
						line-height: 28px;
						color: $uni-tabbar-color;
					}
					
					.state-action {
						flex-shrink: 0;
						:deep(.btn-pay) {
							background-color: $uni-main-color;
							padding: 8px 0;
							border-radius: 8px;
							text-align: center;
							color: #fff;
							font-size: 12px;
							font-weight: 600;
							line-height: 22px;
							height: 34px;
							width: 94px;
							min-width: auto;
						}
						
						.logistics-state {
							font-size: 14px;
							font-weight: 400;
							line-height: 18px;
							color: #989898;
						}
					}
				}
				.balance-payment {
					background-color: #FFF4F0;
					padding: 15px;
					border-radius: 0 0 8px 8px;
					
					.label {
						color: #23282C;
						font-size: 16px;
						font-weight: 500;
						line-height: 20px;
					}
					
					.reason {
						margin-top: 6px;
						border-radius: 8px;
						background-color: #FFE7DD;
						word-wrap: break-word;
						padding: 10px 11px;
						font-size: 16px;
						font-weight: 400;
						line-height: 20px;
						color: #000;
					}
				}
			}
		}
	}
</style>